<script setup>
import { ref, reactive, toRaw, onMounted } from 'vue'
import { getAll, addApi, deleteApi, queryByIdApi, updateApi } from '@/api/warehouseArealocal'
import { ElMessage } from 'element-plus'



const form = ref({
  warehouseAreaName: '',           // 库区名称搜索条件
  warehouseId: '',
  warehouseName: ''
})

const formData = reactive({
  id: '', 
  warehouseAreaName: '',           // 库区名称
  warehouseId: '',
  warehouseName: '',
  locaCode: '',
  locaLen: '',
  locaWidth: '',
  locaHeight: '',
  localVolume: '',
  localBearingCapacity: '',
  tunnelNumber: '',
  shelfNumber: '',
  layerNumber: '',
  isDel: ' '
})




const tableData = ref([])
const currentPage = ref(1)
const total = ref(0)
const pageSize = ref(5)
const title = ref('')
const open = ref(false)


const onSubmit = async () => {
  const res = await getAll(form.value.warehouseAreaName, form.value.warehouseName, currentPage.value, pageSize.value)
  tableData.value = res.data.rows
  total.value = res.data.total
}



const clean = () => {
  form.value.warehouseAreaName = ''
  form.value.warehouseId = ''

  onSubmit()
}

const add = () => {
  title.value = '新增'
  open.value = true
  // 重置表单
  formData.id = undefined  // 重置ID，确保是新增而不是修改
  formData.warehouseAreaName = ''
  formData.warehouseId = ''
  formData.warehouseName = ''
  formData.locaCode = ''
  formData.locaLen = ''
  formData.locaWidth = ''
  formData.locaHeight = ''
  formData.localVolume = ''
  formData.localBearingCapacity = ''
  formData.tunnelNumber = ''
  formData.shelfNumber = ''
  formData.layerNumber = ''
  formData.isDel = ''
}

const submitForm = async () => {
  // 处理表单提交
  try {


    let res;
    // 根据是否存在ID判断是添加还是修改
    if (formData.id) {
      // 修改操作
      res = await updateApi(formData)
    } else {
      // 添加操作
      res = await addApi(formData)
    }

    if (res.code) {
      ElMessage.success(formData.id ? '修改成功' : '添加成功')
      open.value = false
      onSubmit()
    } else {
      ElMessage.error(formData.id ? '修改失败' : '添加失败')
    }
  } catch (error) {
    ElMessage.error((formData.id ? '修改失败' : '添加失败') + ': ' + error.message)
  }
}
const cancel = () => {
  open.value = false
}
const handleUpdate = async (row) => {
  title.value = '修改库位'
  open.value = true
  
  try {
    // 获取库位详细信息
    const res = await queryByIdApi(row.id)
    
    // 填充表单数据
    formData.id = res.data.id
    formData.warehouseAreaName = res.data.warehouseAreaName
    formData.warehouseId = res.data.warehouseId
    formData.warehouseName = res.data.warehouseName
    formData.locaCode = res.data.locaCode
    formData.locaLen = res.data.locaLen
    formData.locaWidth = res.data.locaWidth
    formData.locaHeight = res.data.locaHeight
    formData.localVolume = res.data.localVolume
    formData.localBearingCapacity = res.data.localBearingCapacity
    formData.tunnelNumber = res.data.tunnelNumber
    formData.shelfNumber = res.data.shelfNumber
    formData.layerNumber = res.data.layerNumber
    formData.isDel = res.data.isDel !== undefined ? String(res.data.isDel) : ''
  } catch (error) {
    ElMessage.error('获取库位信息失败: ' + error.message)
    console.error(error)
  }
}
const handleDelete = async (row) => {
  try {
    const res = await deleteApi(row.id)
    if (res.code) {
      ElMessage.success('删除成功')
      onSubmit()
    } else {
      ElMessage.error('删除失败')
    }
  } catch (error) {
    ElMessage.error('删除失败: ' + error.message)
  }
}


onMounted(() => {
  onSubmit()

})
</script>
<template>
  <el-button type="primary" @click="add">新增</el-button>
  <el-form :inline="true" :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="仓库名字">
      <el-input v-model="form.warehouseName" />
    </el-form-item>
    <el-form-item label="库区名称">
      <el-input v-model="form.warehouseAreaName" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      <el-button @click="clean">取消</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="warehouseName" label="仓库名称" width="120" />
    <el-table-column prop="warehouseAreaName" label="库区名称" width="120" />
    <el-table-column prop="category" label="库区类型" width="120" />
    <el-table-column prop="locaCode" label="库位编码" width="120" />
    <el-table-column prop="locaLen" label="库位长度" width="120" />
    <el-table-column prop="locaWidth" label="库位宽度" width="120" />
    <el-table-column prop="locaHeight" label="库位高度" width="120" />
    <el-table-column prop="localVolume" label="库位容积" width="120" />
    <el-table-column prop="localBearingCapacity" label="库位承重" width="120" />
    <el-table-column prop="tunnelNumber" label="巷道号" width="120" />
    <el-table-column prop="shelfNumber" label="货架号" width="120" />
    <el-table-column prop="layerNumber" label="层号" width="120" />
    <el-table-column prop="isDel" label="是否有效" width="120">
      <template #default="scope">
        <el-tag v-if="scope.row.isDel === 1" type="success">有效</el-tag>
        <el-tag v-else type="danger">无效</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="120">

      <template #default="scope">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>

    </el-table-column>
  </el-table>
  <div class="demo-pagination-block" style="margin-top: 10px; text-align: right;">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
    <el-form ref="projectRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="仓库名字" prop="warehouseName">
        <el-input v-model="formData.warehouseName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库区名称" prop="warehouseAreaName">
        <el-input v-model="formData.warehouseAreaName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库位编码" prop="locaCode">
        <el-input v-model="formData.locaCode" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库位长度" prop="locaLen">
        <el-input v-model="formData.locaLen" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库位宽度" prop="locaWidth">
        <el-input v-model="formData.locaWidth" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库位高度" prop="locaHeight">
        <el-input v-model="formData.locaHeight" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库位容积" prop="localVolume">
        <el-input v-model="formData.localVolume" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="库位承重" prop="localBearingCapacity">
        <el-input v-model="formData.localBearingCapacity" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="巷道号" prop="tunnelNumber">
        <el-input v-model="formData.tunnelNumber" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="货架号" prop="shelfNumber">
        <el-input v-model="formData.shelfNumber" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="层号" prop="layerNumber">
        <el-input v-model="formData.layerNumber" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="是否有效" prop="isDel">
        <el-select v-model="formData.isDel" clearable placeholder="请选择" style="width: 240px">
          <el-option label="有效" value="1" />
          <el-option label="无效" value="2" />
        </el-select>
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped></style>